<!--生成部分退款弹框-->
<template>
  <el-dialog class="dia_addressBu" title="生成部分退款" append-to-body :close-on-click-modal="closeOnclickModal"
             width="500px" top="3vh" :visible.sync="isDialogShow" @close="close">
    <el-tabs v-model="refundType">
      <el-tab-pane label="根据重量退" name="1"></el-tab-pane>
      <el-tab-pane label="根据金额退" name="2"></el-tab-pane>
    </el-tabs>
    <el-form ref="dialogFormV2" v-if="refundType == 1" :model="dialogFormV2" :size="size" label-width="88px">
      <el-form-item label="下单重量:">
        <span>{{dialogForm.weight}} kg</span>
      </el-form-item>
      <el-form-item label="核实重量:" prop="newWeight" :rules="yh_rules({required:true})">
        <el-input type="number" v-model="dialogFormV2.newWeight" clearable></el-input>
      </el-form-item>
    </el-form>
    <el-form ref="dialogForm" v-if="refundType == 2" :model="dialogForm" :size="size" label-width="88px">
      <el-form-item label="运单号:">
        <span>{{dialogForm.waybill}}</span>
      </el-form-item>
      <el-form-item label="下单金额:">
        <span>{{dialogForm.payMoney}} 分</span>
      </el-form-item>
      <el-form-item label="减少的原价:" prop="subMoney">
        <el-input type="number" v-model="dialogForm.subMoney" clearable></el-input>
      </el-form-item>
      <el-form-item label="下单重量:">
        <span>{{dialogForm.weight}} kg</span>
      </el-form-item>
      <el-form-item label="减少的重量:" prop="subWeight">
        <el-input type="number" v-model="dialogForm.subWeight" clearable></el-input>
      </el-form-item>
      <el-form-item label="订单类型" :rules="yh_rules({required:true})"
                    prop="type">
        <el-select style="width: 180px;" v-model="dialogForm.type" clearable>
          <el-option :value="item.value" :label="item.label" v-for="item in typeList"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="close" :size="size">取消</el-button>
      <el-button type="primary" @click="submit" :size="size">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import api from '@/utils/api.js'
  export default {
    name: 'bufenRefund',
    props: {
      propDlvInfo: {
        type: Object
      },
      isDialogBuFenRefundShow: {
        type: Boolean,
        default: false
      },
    },
    data () {
      return {
        typeList: [
          {value: 'sub', label: '超轻'},
          {value: 'add', label: '超重'},
          {value: 'material', label: '耗材'},
          {value: 'insure', label: '保价'},
          {value: 'normal', label: '普通'}
        ],
        dialogForm: {
          subMoney: '',
          subWeight: '',
          type: 'sub'
        },
        dialogFormV2: {
          newWeight: ''
        },
        refundType: '1',
        isDialogShow: false
      }
    },
    computed: {
      ...mapGetters(['size', 'closeOnclickModal']),
    },
    watch: {
      isDialogBuFenRefundShow (newValue) {
        this.isDialogShow = newValue
        if (newValue && this.propDlvInfo.id) {
          let {id: orderId, payMoney, weight, waybill} = this.propDlvInfo
          Object.assign(this.dialogForm, {orderId, payMoney, weight, waybill})
          Object.assign(this.dialogFormV2, {orderId})
        }
      },
    },
    methods: {
      // 提交
      submit () {
        if (this.refundType == 1) {
          this.$validateSubmit('dialogFormV2').then(() => {
            api.createLightWeightOrderV2(this.dialogFormV2).then(res => {
              this.$message.success('操作成功')
              this.$emit('refreshData')
              this.close()
            })
          })
        }
        if (this.refundType == 2) {
          this.$validateSubmit('dialogForm').then(() => {
            api.createLightWeightOrder(this.dialogForm).then(res => {
              this.$message.success('操作成功')
              this.$emit('refreshData')
              this.close()
            })
          })
        }
      },
      close () {
        if (this.$refs.dialogForm) {
          this.$refs.dialogForm.resetFields()
        }
        if (this.$refs.dialogFormV2){
          this.$refs.dialogFormV2.resetFields()
        }
        this.$emit('update:isDialogBuFenRefundShow', false)
      }
    }
  }
</script>
